<!-- 试卷管理 -->
<template>
  <div class="exam-container">
    <div v-if="configDetailShow === 1">
      <div class="flex-center">
        <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
          <px-form-item label="科室" prop="className">
            <px-select v-model="queryParams.className" style="width: 260px" placeholder="请选择科室" clearable>
              <px-option v-for="item in classNameList" :key="item.value" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
          <px-form-item label="考试类别" prop="examType">
            <px-select v-model="queryParams.examType" style="width: 260px" placeholder="请选择考试类别" clearable>
              <px-option v-for="item in examTypeList" :key="item.value" :label="item.name" :value="item.name" />
            </px-select>
          </px-form-item>
          <px-form-item label="考试名称" prop="examName">
            <px-input v-model="queryParams.examName" style="width: 260px" placeholder="请输入考试名称" clearable />
          </px-form-item>
          <div class="search-form-btn">
            <px-button type="primary" @click="handleQuery">查询</px-button>
            <px-button @click="resetQuery">重置</px-button>
          </div>
        </px-form>
      </div>
      <div class="flex-center mg-b-8">
        <px-button v-has="'ALL_EXAMMANAGE_EXAMCONFIG_ADD'" type="primary" @click="handleAdd">新增</px-button>
      </div>
      <div v-loading="loading" class="table-content">
        <px-table height="calc(100vh - 340px)" :data="tableData" size="small" border class="common-table">
          <px-table-column type="index" label="序号" fixed width="55" align="center" />
          <px-table-column prop="examName" label="考试名称" min-width="120" show-overflow-tooltip />
          <px-table-column prop="examCategoryId" label="考试类别" min-width="120" show-overflow-tooltip />
          <px-table-column prop="departmentName" label="科室" min-width="120" show-overflow-tooltip />
          <px-table-column prop="publishType" label="状态" min-width="80" show-overflow-tooltip>
            <template #default="scope">
              <span>
                <span v-if="scope.row.publishType === null" />
                <div v-else :class="[scope.row.publishType === 'P' ? 'published-status' : 'unPublished-status']">
                  <span :class="['status-point', scope.row.publishType === 'P' ? 'published-status-point' : 'unPublished-status-point']" />
                  <span class="status-span">{{ scope.row.publishType === "P" ? "已发布" : "未发布" }}</span>
                </div>
              </span>
            </template>
          </px-table-column>
          <px-table-column prop="publishTime" label="发布时间" min-width="120" show-overflow-tooltip />
          <px-table-column prop="updateTime" label="更新时间" min-width="120" show-overflow-tooltip />
          <px-table-column prop="updateByName" label="更新人" min-width="120" show-overflow-tooltip />
          <px-table-column label="操作" width="180" fixed="right" align="center">
            <template #default="scope">
              <px-tooltip content="发布" placement="top">
                <px-button
                  v-if="scope.row.publishType === 'E'"
                  v-has="'ALL_EXAMMANAGE_EXAMCONFIG_PUBLISH'"
                  link
                  type="primary"
                  @click="handlePublish(scope.row)"
                >
                  <PublishIcon />
                </px-button>
              </px-tooltip>
              <px-tooltip content="下架" placement="top">
                <px-button
                  v-if="scope.row.publishType === 'P'"
                  v-has="'ALL_EXAMMANAGE_EXAMCONFIG_DELIST'"
                  link
                  type="primary"
                  @click="handleUnPublish(scope.row)"
                >
                  <OffShelfIcon />
                </px-button>
              </px-tooltip>
              <px-tooltip content="管理考生" placement="top">
                <px-button link icon="RecipeManagement" type="primary" @click="handleManageStudent(scope.row)" />
              </px-tooltip>
              <px-tooltip content="编辑" placement="top">
                <px-button
                  v-if="scope.row.publishType === 'E'"
                  v-has="'ALL_EXAMMANAGE_EXAMCONFIG_EDIT'"
                  link
                  icon="EditPen"
                  type="primary"
                  @click="handleEdit(scope.row)"
                />
              </px-tooltip>
              <px-tooltip content="删除" placement="top">
                <px-button v-has="'ALL_EXAMMANAGE_EXAMCONFIG_DELETE'" link icon="Delete" type="danger" @click="handleDelete(scope.row)" />
              </px-tooltip>
            </template>
          </px-table-column>
        </px-table>
        <pagination
          v-show="total > 0"
          v-model:page="pageNum"
          v-model:limit="pageSize"
          class="table-pagination"
          :total="total"
          @pagination="handleQuery"
        />
      </div>
    </div>
    <div v-if="configDetailShow === 2">
      <AddExam :handleType="handleType" :rowData="rowData" @goBack="goBack" />
    </div>
    <div v-if="configDetailShow === 3">
      <ExamManageStudent :handleType="handleType" :rowData="rowData" @goBack="goBack" />
    </div>
  </div>
</template>

<script setup>
import { queryCurrentClassList, queryDictData } from "@/api/common";
import { deleteExamAPI, getExamListAPI, publishExamAPI, unPublishExamAPI } from "@/api/knowledge/examManage";
import OffShelfIcon from "@/assets/svg/knowledge/offShelf.svg?component";
import PublishIcon from "@/assets/svg/knowledge/publish.svg?component";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, ref, toRefs } from "vue";
import AddExam from "./component/addExam.vue";
import ExamManageStudent from "./component/examManageStudent.vue";

defineOptions({
  name: "ALL_EXAMMANAGE_EXAMCONFIG"
});
const formRef = ref(null);

const state = reactive({
  classNameList: [],
  examTypeList: [],
  queryParams: {
    className: "",
    examType: "",
    examName: ""
  },
  loading: false,
  tableData: [],
  total: 1,
  pageNum: 1,
  pageSize: 20,
  handleType: "",
  rowData: {},
  configDetailShow: 1 // 1：列表页面；2：新增页；3：管理页
});
const { classNameList, examTypeList, queryParams, loading, tableData, total, pageNum, pageSize, handleType, rowData, configDetailShow } =
  toRefs(state);

onMounted(() => {
  getClassNameSelect();
  getExamTypeList();
  handleQuery();
});

// 获取科室下拉框数据
const getClassNameSelect = async () => {
  classNameList.value = await queryCurrentClassList();
};

// 获取考试类别下拉框数据
const getExamTypeList = async () => {
  const typeData = await queryDictData({ typeCode: "EXAM_TYPE" });
  state.examTypeList = [...typeData];
};

// 查询
const handleQuery = async () => {
  try {
    state.loading = true;
    const params = {
      pageNum: state.pageNum,
      pageSize: state.pageSize,
      categoryId: state.queryParams.examType,
      department: state.queryParams.className,
      examName: state.queryParams.examName
    };
    const res = await getExamListAPI(params);
    state.tableData = res.data;
    state.total = res.total;
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

// 重置
const resetQuery = () => {
  formRef.value.resetFields();
  handleQuery();
};

// 新增
const handleAdd = () => {
  state.handleType = "Add";
  state.rowData = {};
  state.configDetailShow = 2;
};

// 发布
const handlePublish = async row => {
  const params = {
    examId: row.examId,
    // publishType: row.publishType
    publishType: "P"
  };
  await publishExamAPI(params);
  handleQuery();
  PxMessage.success("发布成功");
};

// 下架
const handleUnPublish = async row => {
  const params = {
    examId: row.examId,
    // publishType: row.publishType
    publishType: ""
  };
  await unPublishExamAPI(params);
  handleQuery();
  PxMessage.success("下架成功");
};

// 管理考生
const handleManageStudent = row => {
  state.handleType = "Edit";
  state.rowData = row;
  state.configDetailShow = 3;
};

// 编辑
const handleEdit = row => {
  state.handleType = "Edit";
  state.rowData = row;
  state.configDetailShow = 2;
};

// 删除
const handleDelete = row => {
  PxMessageBox.confirm("是否确定删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      await deleteExamAPI({ examId: row.examId });
      PxMessage.success("删除成功");
      handleQuery();
    })
    .catch(() => {});
};

// 返回
const goBack = () => {
  state.configDetailShow = 1;
  handleQuery();
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/knowledge/examManage/scss/common.scss");
</style>
